<template>
  <div class="app-container">
    <!-- 检索 start -->
    <div class="complex-table_container">
      <span style="margin-right: 20px">日期</span>
      <el-date-picker
        v-model="data_picker"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        style="margin-right: 10px"
      />
      <el-button type="primary">搜索</el-button>
      <el-button type="primary" @click="goEdit">批量修改房量/房态</el-button>
    </div>
    <!-- 检索 end -->
    <!-- 数据列表 start -->
    <hotel-table1
      ref="hotelTable"
      :list-loading="listLoading"
      :table-data="tableData"
      :column-data="columnData"
      @headerClick="headerClick"
    >
      <template slot="money1" slot-scope="{ row }">
        <div
          v-if="row[0].Mon"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money1 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money1"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money2" slot-scope="{ row }">
        <div
          v-if="row[0].Tue"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money2 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money2"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money3" slot-scope="{ row }">
        <div
          v-if="row[0].Wed"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money3 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money3"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money4" slot-scope="{ row }">
        <div
          v-if="row[0].Thur"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money4 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money4"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money5" slot-scope="{ row }">
        <div
          v-if="row[0].Fri"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money5 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money5"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money6" slot-scope="{ row }">
        <div
          v-if="row[0].Sat"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money6 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money6"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
      <template slot="money7" slot-scope="{ row }">
        <div
          v-if="row[0].Sun"
          style="width: 100%; height: 100%"
          @click="cellClick(row[0], row[1])"
        >
          {{ row[0].Money7 }}
        </div>
        <div v-else>
          <el-input
            v-model="row[0].Money7"
            v-focus
            @change="cellInput(row[0], row[1])"
            @blur="cellBlur(row[0], row[1])"
          />
        </div>
      </template>
    </hotel-table1>
  </div>
</template>

<script>
import HotelTable1 from '@/components/HotelTable'

import {
  roompersionsIndex,
  roompersionsDelete
} from '@projectName/views/diandi_place/api/room/roompersions'
export default {
  components: {
    HotelTable1
  },
  directives: {
    focus: {
      inserted: function(el) {
        el.querySelector('input').focus()
      }
    }
  },
  data() {
    return {
      listLoading: false,
      dialogFormVisible: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      data_picker: '',
      // 表格数据 start
      columnData: [
        { label: '房型/日期', prop: 'name' },
        { label: '<', prop: 'home_state' },
        { label: '03-17', slot: 'money1', prop: 'qt_Money1' },
        { label: '03-18', slot: 'money2', prop: 'qt_Money2' },
        { label: '03-19', slot: 'money3', prop: 'qt_Money3' },
        { label: '03-20', slot: 'money4', prop: 'qt_Money4' },
        { label: '03-21', slot: 'money5', prop: 'qt_Money5' },
        { label: '03-22', slot: 'money6', prop: 'qt_Money6' },
        { label: '03-23', slot: 'money7', prop: 'qt_Money7' },
        { label: '>' }
      ],
      tableData: [
        {
          id: 'xxxx',
          name: '12[含早]',
          home_state: '前台价',
          Mon: true,
          Tue: true,
          Wed: true,
          Thur: true,
          Fri: true,
          Sat: true,
          Sun: true,
          Money1: 23.0,
          Money2: 23.0,
          Money3: 23.0,
          Money4: 23.0,
          Money5: 23.0,
          Money6: 23.0,
          Money7: 23.0
        },
        {
          id: 'xxxx',
          name: '12[含早]',
          home_state: '优惠价',
          Mon: true,
          Tue: true,
          Wed: true,
          Thur: true,
          Fri: true,
          Sat: true,
          Sun: true,
          Money1: 10,
          Money2: 10,
          Money3: 10,
          Money4: 10,
          Money5: 10,
          Money6: 10,
          Money7: 10
        },
        {
          id: 'xxxx',
          name: '12[含早]',
          home_state: '前台价',
          Mon: true,
          Tue: true,
          Wed: true,
          Thur: true,
          Fri: true,
          Sat: true,
          Sun: true,
          Money1: 23.0,
          Money2: 23.0,
          Money3: 23.0,
          Money4: 23.0,
          Money5: 23.0,
          Money6: 23.0,
          Money7: 23.0
        },
        {
          id: 'xxxx',
          name: '12[含早]',
          home_state: '优惠价',
          Mon: true,
          Tue: true,
          Wed: true,
          Thur: true,
          Fri: true,
          Sat: true,
          Sun: true,
          Money1: 10,
          Money2: 10,
          Money3: 10,
          Money4: 10,
          Money5: 10,
          Money6: 10,
          Money7: 10
        }
      ],
      // 表格数据end
      total: 0,
      filterInfo: {
        data: {
          page: 1,
          pageSize: 10
        }
      },
      data_picker: [new Date(), +new Date() + 3600000 * 24 * 6],
      // 表格日期start
      upYear: '', // 当前年(可变)
      upMonth: '', // 当前月(可变)
      year: '', // 当前年(不可变)
      month: '', // 当前月(不可变)
      nowYear: '', // 当前年(可变)
      weekStart: '', // 当前日期一周开始(可变)
      weekEnd: '', // 当前日期一周结束(可变)
      newDay: '', // 当前日期一周结束(不可变)
      newYear: '', // 当前年(不可变)
      // 表格日期end
      // 搜索日期start
      searchStart: '', // 搜索日期开始
      searchEnd: '' //  搜索日期结束
      // 搜索日期end
    }
  },
  created() {
    this.getList()
    this.formatNewDate()
  },
  methods: {
    // 表格日期start
    getReduce1() {
      // 周减
      const nowYear = this.nowYear
      const weekStart = this.weekStart
      const weekEnd = this.weekEnd
      let val = nowYear + '/' + weekStart.replace(/\./, '/')
      val = this.formatDate(
        new Date(new Date(val).getTime() - 86400000 * 7),
        'yyyy-MM-dd'
      )
      const getNew = this.getWeekStartAndEnd(val)
      this.columnData[2].label = getNew.weekStart
      this.columnData[3].label = getNew.two
      this.columnData[4].label = getNew.three
      this.columnData[5].label = getNew.four
      this.columnData[6].label = getNew.five
      this.columnData[7].label = getNew.six
      this.columnData[8].label = getNew.weekEnd
      this.weekStart = getNew.weekStart
      this.weekEnd = getNew.weekEnd
      this.nowYear = getNew.nowYear
    },
    getplus1() {
      // 周加
      const nowYear = this.nowYear
      const weekStart = this.weekStart
      const weekEnd = this.weekEnd
      const newDay = this.newDay
      const newYear = this.newYear
      let val = nowYear + '/' + this.weekStart.replace(/\./, '/')
      val = this.formatDate(
        new Date(new Date(val).getTime() + 86400000 * 7),
        'yyyy-MM-dd'
      )
      const getNew = this.getWeekStartAndEnd(val)
      this.columnData[2].label = getNew.weekStart
      this.columnData[3].label = getNew.two
      this.columnData[4].label = getNew.three
      this.columnData[5].label = getNew.four
      this.columnData[6].label = getNew.five
      this.columnData[7].label = getNew.six
      this.columnData[8].label = getNew.weekEnd
      this.weekStart = getNew.weekStart
      this.weekEnd = getNew.weekEnd
      this.nowYear = getNew.nowYear
    },
    formatNewDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const month = date.getMonth() + 1 // 月
      let day = date.getDate() // 日
      day = day < 10 ? '0' + day : day // 如果只有一位，则前面补零
      this.year = year
      this.upYear = year
      this.month = month
      this.upMonth = month
      this.day = day
      const nowData = year + '-' + month + '-' + day
      const getNew = this.getWeekStartAndEnd(nowData)
      this.columnData[2].label = getNew.weekStart
      this.columnData[3].label = getNew.two
      this.columnData[4].label = getNew.three
      this.columnData[5].label = getNew.four
      this.columnData[6].label = getNew.five
      this.columnData[7].label = getNew.six
      this.columnData[8].label = getNew.weekEnd
      this.weekStart = getNew.weekStart
      this.weekEnd = getNew.weekEnd
      this.nowYear = getNew.nowYear
      this.newDay = getNew.weekEnd
      this.newYear = getNew.nowYear
    },
    // 获取指定日期的那一周的开始、结束日期
    getWeekStartAndEnd(val) {
      let now = ''
      if (val) {
        val = val.replace(/-/g, '/')
        now = new Date(val) // 日期
      } else {
        now = new Date() // 日期
      }
      const nowDayOfWeek = now.getDay() // 本周的第几天
      const nowDay = now.getDate() // 当前日
      const nowMonth = now.getMonth() // 当前月
      const nowYear = now.getYear() // 当前年
      const one = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        1
      )
      const two = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        2
      )
      const three = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        3
      )
      const four = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        4
      )
      const five = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        5
      )
      const six = this.getWeekStartDate(
        nowYear,
        nowMonth,
        nowDay,
        nowDayOfWeek,
        6
      )
      const seven = this.getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek)
      const newList = {
        weekStart: one,
        two,
        three,
        four,
        five,
        six,
        weekEnd: seven,
        nowYear: nowYear + 1900
      }
      return newList
    },
    // 获得某一周的开始日期
    getWeekStartDate(nowYear, nowMonth, nowDay, nowDayOfWeek, n) {
      const weekStartDate = new Date(nowYear, nowMonth, nowDay + (n - 1))
      return this.formatNewDates(weekStartDate)
    },
    // 获得某一周的结束日期
    getWeekEndDate(nowYear, nowMonth, nowDay, nowDayOfWeek) {
      const weekEndDate = new Date(nowYear, nowMonth, nowDay + 6)
      return this.formatNewDates(weekEndDate)
    },
    // 日期格式化
    formatNewDates(date) {
      var myyear = date.getFullYear()
      var mymonth = date.getMonth() + 1
      var myweekday = date.getDate()
      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      return mymonth + '-' + myweekday
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      const o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      }
      for (const k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          const str = o[k] + ''
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : this.padLeftZero(str)
          )
        }
      }
      return fmt
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length)
    },
    headerClick(column, event) {
      if (column.label === '<') {
        if (
          +new Date(this.$moment(this.data_picker[0]).format('YYYY-MM-DD')) >=
            +new Date(this.year + '-' + this.weekStart) ||
          +new Date(this.$moment(this.searchStart).format('YYYY-MM-DD')) >=
            +new Date(this.year + '-' + this.weekStart)
        ) {
          return
        }
        this.getReduce1()
      }
      if (column.label === '>') {
        if (
          +new Date(this.$moment(this.data_picker[1]).format('YYYY-MM-DD')) <=
            +new Date(this.year + '-' + this.weekEnd) ||
          +new Date(this.$moment(this.searchEnd).format('YYYY-MM-DD')) <=
            +new Date(this.year + '-' + this.weekEnd)
        ) {
          return
        }
        this.getplus1()
      }
    },
    choseDate(row, column) {
      if (column.label === this.columnData[2].label) {
        row.Mon = !row.Mon
      } else if (column.label === this.columnData[3].label) {
        row.Tue = !row.Tue
      } else if (column.label === this.columnData[4].label) {
        row.Wed = !row.Wed
      } else if (column.label === this.columnData[5].label) {
        row.Thur = !row.Thur
      } else if (column.label === this.columnData[6].label) {
        row.Fri = !row.Fri
      } else if (column.label === this.columnData[7].label) {
        row.Sat = !row.Sat
      } else if (column.label === this.columnData[8].label) {
        row.Sun = !row.Sun
      }
    },
    cellClick(row, column) {
      this.choseDate(row, column)
    },
    cellInput(row, column) {
      console.log(row, column)
      this.$confirm('你确定要修改吗').then((isOk) => {
        if (isOk) {
          this.$message.success('修改成功')
        }
      })
    },
    cellBlur(row, column) {
      this.choseDate(row, column)
    },
    goEdit(row) {
      this.$router.push({
        name: 'diandi-place-room-room-price-update',
        params: {
          id: row.id,
          rowData: row
        }
      })
    },
    getList() {
      const that = this
      that.listLoading = true
      roompersionsIndex(that.filterInfo.data).then((response) => {
        that.total = response.data.dataProvider.total
        that.list = response.data.dataProvider.allModels
        console.log('列表数据层级测试', that.list)
        that.listLoading = false
      })
    }
  }
}
</script>
<style scoped>
.active {
  color: #fff;
  background-color: #409eff;
}
.isActive {
  color: #fff;
  background-color: #9ca1a1;
}
.complex-table_container {
  margin-top: 20px;
  padding: 27px 11px 20px;
  background: #ffffff;
  border-radius: 8px;
}
</style>
